<template>
	<el-row class="el-row" :gutter="gutter" :justify="justify" :align="align" :tag="tag">
		<slot />
	</el-row>
</template>
<script lang="ts" setup>
import { theme } from '@/store';
const props = defineProps({
	gutter: {
		type: Number,
		default: 0,
	},
	//flex 布局下的水平排列方式：start/end/center/space-around/space-between
	justify: {
		type: String,
		default: 'start',
	},
	//flex 布局下的垂直排列方式：top/middle/bottom
	align: {
		type: String,
		default: 'top',
	},
	// 栅格占据的列数
	span: Number,
	// 栅格左侧的间隔格数
	offset: {
		type: Number,
		default: 0,
	},
	// 栅格向右移动格数
	push: {
		type: Number,
		default: 0,
	},
	// 栅格向左移动格数
	pull: {
		type: Number,
		default: 0,
	},
	//自定义元素标签:html标签
	tag: {
		type: String,
		default: 'div',
	},
	// <768px 响应式栅格数或者栅格属性对象
	xs: [Number, Object],
	// ≥768px 响应式栅格数或者栅格属性对象
	sm: [Number, Object],
	// ≥992px 响应式栅格数或者栅格属性对象
	md: [Number, Object],
	// ≥1200px 响应式栅格数或者栅格属性对象
	lg: [Number, Object],
	// ≥1920px 响应式栅格数或者栅格属性对象
	xl: [Number, Object],
	rowFlag: Boolean,
	disabled: Boolean,
});
const attrs = useAttrs();
const state = reactive({
	mySize: attrs.size,
});
if (!state.mySize) {
	state.mySize = theme.globalComponentSize;
}
let golbalProps = {
	size: state.mySize,
	span: props.span,
	ofset: props.offset,
	pull: props.pull,
	push: props.push,
	xs: props.xs,
	sm: props.sm,
	md: props.md,
	lg: props.lg,
	xl: props.xl,
	rowFlag: props.rowFlag,
	disabled: props.disabled,
};
provide('golbalProps', golbalProps);
</script>
<script lang="ts">
// 声明额外的选项
export default {
	name: 'zh-row',
	inheritallAttrs: false,
};
</script>

<style scoped lang="scss"></style>
